<template>
	<view class="content font_family">
		<payselect :select_type='select_type' @select_check='select_check'></payselect>
		<view class="top " @click="go('/pages/my_msg/sh_address?msg=check')" v-if="select_type==2 || select_type==3">
			<view class="f_z_b f_j">
				<view class="left" v-if="address_list.length > 0">
					<view class="title f_j">
						<view class="mr_tag" v-if="address_list[address_check].is_default==1">
							默认
						</view>
						<view class="tag">
							{{address_list[address_check].flag | tag}}
						</view>
						<view class="address">
							{{address_list[address_check].address}}
						</view>
					</view>
					<view class="xx_address">
						{{address_list[address_check].xx_address}}
					</view>
					<view class="name f">
						<view class="text">
							{{address_list[address_check].name}}
						</view>
						<view class="phone">
							{{address_list[address_check].tel}}
						</view>
					</view>
				</view>
				<view class="left" v-else>
					<view class="xx_address">
						请选择收货地址
					</view>
				</view>
				<image src="../../static/public/go.png" mode=""></image>
			</view>
			<view class="zq_time f_z_b" @click.stop="ps_show=true">
				<view class="time_left">
					配送时间
				</view>
				<view class="time_right f_j">
					<text>{{pay_data.ps_time?pay_data.ps_time:'请选择时间'}}</text>
					<image src="../../static/public/go_h.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="top zq_box" v-else>
			<view class="zq_address f_z_b" @click="open_location">
				<view class="zq_left">
					<view class="name">
						{{dl_msg.name}}
					</view>
					<view class="left_address">
						<image src="../../static/order/wz.png" mode=""></image>
						<text>{{dl_msg.address}}</text>
					</view>
				</view>
				<view class="zq_right">
					<image class="zq_wz" src="../../static/order/zq_address.png" mode="heightFix"></image>
				</view>
			</view>
			<view class="zq_time f_z_b" @click="zq_time">
				<view class="time_left">
					自取时间
				</view>
				<view class="time_right f_j">
					<text>{{pay_data.yy_time?pay_data.yy_time:'请选择时间'}}</text>
					<image src="../../static/public/go_h.png" mode=""></image>
				</view>
			</view>
			<view class="zq_phone f_z_b f_j">
				<view class="phone_left">
					预留电话
				</view>
				<view class="phone_right f_j">
					<u--input inputAlign='right' placeholder="请输入您的预留电话" border="none"
						v-model="pay_data.yl_mobile"></u--input>
					<view class="phone_btn f_zj" @click="get_phone">
						获取号码
					</view>
				</view>
			</view>
		</view>
		<view class="item">
			<view class="sp f" v-for="(item,index) in sp_msg" :key="index">
				<image :src="item.image" mode="aspectFill"></image>
				<view class="msg f_d f_z_b">
					<view class="name text_ellipsis2">
						{{item.title}}
					</view>
					<view class="gg">
						规格：{{item.item_name}}
					</view>
					<view class="time" v-if="select_type==2 || select_type==3">
						发货时间：{{pay_data.ps_time}}
					</view>
				</view>
				<view class="price f_d">
					<view class="text">
						￥{{item.price}}
					</view>
					<view class="num">
						x{{item.count}}
					</view>
				</view>
			</view>
			<view class="total f_j">
				<view class="num">
					共{{sp_num}}件
				</view>
				<view class="text">
					合计
				</view>
				<view class="price">
					￥{{total_price.toFixed(1)}}
				</view>
			</view>
		</view>
		<view class="yhq f_z_b" @click="go('/pages/order/xz_yhq?list='+JSON.stringify(ky_list))" v-if="k_use>0">
			<view class="left">
				使用优惠券
			</view>
			<view class="right f_j">
				<view class="text_ellipsis" style="width: 300rpx;text-align: right;" v-if="yhq_msg">
					{{yhq_msg.coupon.title}}
				</view>
				<view class="" v-else>
					{{k_use}}张优惠券可用
				</view>
				<image src="../../static/public/go_h.png" mode=""></image>
			</view>
		</view>
		<view class="bottom">
			<view class="zw" :style="{height:zw_height+'px'}">

			</view>
			<view class="btn_box f_j safe_bottom">
				<view class="num">
					共{{sp_num}}件
				</view>
				<view class="hj">
					合计：
				</view>
				<view class="price">
					￥{{total_price.toFixed(1)}}
				</view>
				<view class="btn f_zj" @click="go_pay">
					去下单
				</view>
			</view>
		</view>
		<u-datetime-picker ref="datetimePicker" @close="time_show=false" closeOnClickOverlay :show="time_show"
			confirmColor='#EE4133' :maxDate='maxDate' :minDate='minDate' v-model="pay_data.time" mode="datetime"
			@cancel="time_show=false" @confirm="time_confirm"></u-datetime-picker>
		<u-picker :show="ps_show" :columns="ps_arr" confirmColor='#EE4133' @cancel='ps_show=false'
			@confirm='ps_confirm'></u-picker>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import { create, pay, get_openid, usable } from '@/api/user.js'
	import { before } from '@/api/page.js'
	import mixin from '@/mixins/pay.js'
	export default {
		mixins: [mixin],
		computed: {
			...mapState(['address_list', 'address_check', 'dl_id', 'dl_msg', 'user_info', 'common', 'yhq_msg'])
		},
		data() {
			return {
				time_show: false,
				zw_height: 0,
				select_type: 2,
				pay_data: {
					address_id: '',
					cart_id: [],
					// goods_id: '',
					// item_name: '',
					// count: '',
					gg_item: [],
					dl: '',
					order_type: 2,
					yy_time: '',
					yl_mobile: '',
					ps_time: '',
				},
				ps_arr: [],
				ps_show: false,
				sp_msg: [],
				total_price: 0.00,
				sp_num: 0,
				maxDate: 0,
				minDate: 0,

				use_query: {
					dl: '',
					cart_id: [],
					// goods_id: '',
					// item_name: '',
					// count: '',
					gg_item: []
				},
				k_use: 0,
				ky_list: [],

				js_money: {
					dl: '',
					cart_id: [],
					gg_item: '',
					coupon_id: '',
				}
			}
		},
		filters: {
			tag(val) {
				if (val == 1) {
					return '家'
				} else if (val == 2) {
					return '公司'
				} else if (val == 3) {
					return '学校'
				} else {
					return '其他'
				}
			}
		},
		onReady() {
			this.$u.getRect('.btn_box').then(res => {
				// console.log(res);
				this.zw_height = res.height
			})
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		watch: {
			yhq_msg(val, old) {
				this.js_price()
			}
		},
		onLoad(e) {
			this.pay_data.ps_time = this.common.ps_time_list[0]
			this.ps_arr.push(this.common.ps_time_list)
			if (e.obj) { //判断购买方式obj为直接购买，car为购物车购买
				let data = JSON.parse(e.obj)
				this.pay_data.gg_item = data

				// 查询可用优惠券数据
				this.use_query.gg_item = data
				// 计算价格
				this.js_money.gg_item = data
			} else {
				this.pay_data.cart_id = JSON.parse(e.car)
				this.use_query.cart_id = JSON.parse(e.car)
				this.js_money.cart_id = JSON.parse(e.car)
			}
			this.pay_data.dl = this.dl_id
			this.use_query.dl = this.dl_id
			this.js_money.dl = this.dl_id
			this.sp_msg = JSON.parse(e.msg)
			this.sp_msg.forEach(item => {
				// this.total_price += item.price * item.count
				this.sp_num += item.count * 1
			})
			this.set_time()
			this.get_use()
			this.js_price()
		},
		methods: {
			ps_confirm(e) {
				// console.log(e)
				this.pay_data.ps_time = e.value[0]
				this.ps_show = false
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			go_pay() {
				if (this.pay_data.order_type == 1) {
					if (!this.pay_data.yy_time) {
						uni.showToast({
							icon: 'none',
							title: '请选择自提时间'
						})
						return
					}
					if (!this.pay_data.yl_mobile) {
						uni.showToast({
							icon: 'none',
							title: '请填写联系电话'
						})
						return
					}
				} else {
					if (this.address_list.length == 0) {
						this.no_login_tip('还没有配置收货地址，前往配置', '/pages/my_msg/sh_address')
						return
					}
					this.pay_data.address_id = this.address_list[this.address_check].id
				}
				if (this.yhq_msg) {
					this.pay_data.coupon_id = this.yhq_msg.coupon_id
				}
				create(this.pay_data).then(res => {
					console.log(res)
					if (res.code == 1) {
						// 判断购买方式，到付不需要支付
						if (this.pay_data.order_type == 3) {
							uni.showToast({
								icon: 'none',
								title: '下单成功'
							})
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/order/order?index=2'
								})
							}, 1500)
						} else {
							// 判断用户是否有openid
							if (this.user_info.openid) {
								this.pay(res.data.orderNo, this.user_info.openid)
							} else {
								this.get_openid(res.data.orderNo)
							}
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			select_check(type) {
				this.select_type = type
				this.pay_data.order_type = type
				if (type == 1) {
					this.pay_data.yl_mobile = ''
					this.pay_data.yy_time = ''
				} else {
					this.pay_data.address_id = ''
				}
			},
			zq_time() {
				this.time_show = true
			},
			// 设置选择器时间
			set_time() {
				const timestamp = new Date().getTime();
				console.log(timestamp)
				this.minDate = timestamp
				this.maxDate = timestamp + 604800000
			},
			time_confirm(e) {
				// console.log(e)
				this.pay_data.yy_time = this.$u.timeFormat(e.value, 'yyyy-mm-dd hh-MM');
				this.time_show = false
			},
			get_phone() {
				this.pay_data.yl_mobile = this.user_info.mobile
			},
			open_location() {
				uni.openLocation({
					latitude: Number(this.dl_msg.latitude),
					longitude: Number(this.dl_msg.longitude)
				})
			},
			// 获取可用优惠券列表
			get_use() {
				usable(this.use_query).then(res => {
					if (res.code == 1) {
						this.k_use = res.data.length
						this.ky_list = res.data
					}
				})
			},
			// 计算价格
			js_price() {
				if (this.yhq_msg) {
					this.js_money.coupon_id = this.yhq_msg.coupon_id
				}
				before(this.js_money).then(res => {
					if (res.code == 1) {
						this.total_price = res.data.price * 1
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;

		::v-deep .u-popup__content {
			border-radius: 40rpx;
			overflow: hidden;
		}

		.zq_box {
			position: relative;
		}

		.top {
			padding: 30rpx;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 16rpx 16rpx;

			.zq_address {

				padding-bottom: 28rpx;
				border-bottom: 2rpx solid #F1F1F1;

				.zq_left {
					position: relative;
					z-index: 999999999;

					.name {
						font-weight: 400;
						font-size: 34rpx;
						color: #333333;
					}

					.left_address {
						margin-top: 10rpx;
						font-weight: 400;
						font-size: 22rpx;
						color: #707070;

						image {
							width: 18rpx;
							height: 18rpx;
						}
					}
				}

				.zq_right {
					position: absolute;
					right: 0rpx;
					top: 0rpx;

					.zq_wz {
						width: 209rpx;
						height: 139rpx;
					}
				}
			}

			.zq_time {
				padding: 28rpx 0rpx;
				border-bottom: 2rpx solid #F1F1F1;
				font-weight: 400;
				font-size: 26rpx;
				color: #262626;

				.time_left {}

				.time_right {

					image {
						margin-left: 20rpx;
					}
				}
			}

			.zq_phone {
				padding-top: 28rpx;


				.phone_left {
					font-weight: 400;
					font-size: 26rpx;
					color: #262626;
				}

				.phone_right {
					.phone_btn {
						width: 120rpx;
						height: 49rpx;
						border-radius: 2rpx 2rpx 2rpx 2rpx;
						border: 1rpx solid #EE4133;
						font-weight: 400;
						font-size: 20rpx;
						color: #EE4133;
						margin-left: 15rpx;
					}
				}
			}

			.left {
				.title {
					.mr_tag {
						margin-right: 15rpx;
						padding: 0rpx 8rpx;
						font-weight: 250;
						font-size: 20rpx;
						color: #FFFFFF;
						background: #FF9922;
						border-radius: 6rpx 6rpx 6rpx 6rpx;
					}

					.tag {
						padding: 0rpx 8rpx;
						font-weight: 250;
						font-size: 20rpx;
						color: #FFFFFF;
						background: #4A87FC;
						border-radius: 6rpx 6rpx 6rpx 6rpx;
					}

					.address {
						margin-left: 15rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
					}
				}

				.xx_address {
					margin-top: 20rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #232323;
				}

				.name {
					margin-top: 20rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;

					.phone {
						margin-left: 15rpx;
					}
				}
			}

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.item {
			margin-top: 30rpx;
			margin-bottom: 30rpx;
			padding: 30rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.sp {
				margin-bottom: 20rpx;

				image {
					width: 166rpx;
					height: 176rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}

				.msg {
					margin-left: 15rpx;
					flex: 1;

					.name {
						font-weight: 400;
						font-size: 28rpx;
						color: #232323;
					}

					.gg {
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
					}

					.time {
						font-weight: 400;
						font-size: 26rpx;
						color: #FF9922;
					}
				}

				.price {
					margin-left: 15rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;

					.text {}

					.num {
						margin-top: 15rpx;
						align-self: flex-end;
					}
				}
			}

			.total {
				border-top: 1rpx solid #E4E7ED;
				justify-content: flex-end;
				margin-top: 40rpx;
				padding-top: 20rpx;

				.num {
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
				}

				.text {
					margin-left: 20rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #000000;
				}

				.price {
					margin-left: 20rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #FF3767;
				}
			}
		}

		.yhq {
			margin-top: 30rpx;
			// margin-bottom: 30rpx;
			padding: 30rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.right {
				font-weight: 400;
				font-size: 28rpx;
				color: #989898;

				image {
					margin-left: 10rpx;
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.bottom {
			.btn_box {
				box-sizing: border-box;
				width: 100%;
				position: fixed;
				bottom: 0rpx;
				left: 0rpx;
				background-color: #FFFFFF;
				padding: 0rpx 20rpx;
				justify-content: flex-end;
				padding-top: 20rpx;


				.num {
					font-weight: 250;
					font-size: 24rpx;
					font-weight: 250;
					font-size: 28rpx;
					color: #232323;
				}

				.hj {
					margin-left: 20rpx;
					font-weight: 250;
					font-size: 28rpx;
					color: #232323;
				}

				.price {
					// margin-left: 10rpx;
					font-weight: 400;
					font-size: 40rpx;
					color: #FF3767;
				}

				.btn {
					margin-left: 20rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					padding: 20rpx 60rpx;
					background: #EE4133;
					border-radius: 35rpx 35rpx 35rpx 35rpx;
				}
			}
		}
	}
</style>